<template>
	<view class=" u-font-26" style="padding: 30rpx 0;" v-if="bginfo">
		<view class=" u-m-l-20">
			<view class="">
				八字排盘结果：
			</view>
			<view class="">
				姓名：{{bginfo.name}}
			</view>
			<view class="">
				性别：{{bginfo.gender==1?'男':'女'}}
			</view>
			<view class="">
				公历：{{bginfo.gong_li}}
			</view>
			<view class="">
				农历：{{bginfo.nong_li}}
			</view>
			<view class="">
				星座：{{bginfo.xing_zuo}}
			</view>
			<view class="">
				流派：{{bginfo.ri_liu_pai==1?'晚子时日柱算明天':'晚子时日柱算当天'}}
			</view>
			<view class="">
				属相：{{bginfo.sheng_xiao}}
			</view>
		</view>
		<view class=" fourzhu">
			<view class=""  >
				四柱：
			</view>
			<view class="flex-around u-flex-1" >
				<view class="">
					年柱
				</view>
				<view class="">
					月柱
				</view>
				<view class="">
					日柱
				</view>
				<view class="">
					时柱
			</view>
			</view>
		</view>
		<view class="onebg ">
			<text class="" >十神：</text>
			<view class="flex-around u-flex-1">
				<view  v-for="i in bginfo.shi_shen">{{i}}</view>
			</view>
		</view>
		<view class="twobg ">
			<text class="">天干：</text>
			<view class="flex-around u-flex-1">
				<view :style="{color:colorMap[i]}" v-for="i in bginfo.tian_gan" class="u-font-48 flex-center  u-font-bold">{{i}}</view>
			</view>
		</view>
		<view class="onebg ">
			<text class="" >地支：</text>
			<view class="u-flex-1 flex-around">
				<text :style="{color:colorMap[i]}" v-for="i in bginfo.di_zhi" class="u-font-48  u-font-bold">{{i}}</text>
			</view>
		</view>
		<view class="twobg ">
			<text class="" >藏干：</text>
			<view class="flex-around u-flex-1">
				<view class="">
					<view v-for="i in bginfo.cang_gan[0]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.cang_gan[1]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.cang_gan[2]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.cang_gan[3]" class="">{{i}}</view>
				</view>
			</view>
		</view>
		<view class="onebg ">
			<text class="" >纳音：</text>
			<text class="flex-around u-flex-1" v-for="i in bginfo.na_yin">{{i}}</text>
		</view>
		<view class="twobg ">
			<text class="" >空亡：</text>
			<text class="flex-around u-flex-1" v-for="i in bginfo.kong_wang">{{i}}</text>
		</view>
		<view class="onebg">
			<text class="" >神煞：</text>
			<view class="flex-around u-flex-1">
				<view class="" >
					<view v-for="i in bginfo.shen_sha[0]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.shen_sha[1]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.shen_sha[2]" class="">{{i}}</view>
				</view>
				<view class="">
					<view v-for="i in bginfo.shen_sha[3]" class="">{{i}}</view>
				</view>
			</view>
		</view>
		<view class="twobg">
			<text>天干留意：</text>
			<text>{{bginfo.liu_yi.tian_gan_result.join(',')}}</text>
		</view>
		<view class="onebg">
			<text class="u-shrink-no" >地支留意：</text>
			<text>{{bginfo.liu_yi.di_zhi_result.join(',')}}</text>
		</view>
		<!-- 带计算的分的 -->
		<view class="twobg ">
			<text >天干：</text>
			<view  v-for="i in bginfo.score_info.tian_gan" class="u-font-48 u-flex-1 u-font-bold" >
				<view class="" :style="{color:colorMap[i.name]}">
					{{i.name}}
					<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
				</view>
				<view class="flex-warp" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx">
					{{i.basic_score}}
				</view>
			</view>
		</view>
		<view class="onebg ">
			<text>地支：</text>
			<view  v-for="i in bginfo.score_info.di_zhi" class="u-font-48 u-flex-1 u-font-bold" >
				<view class=" " :style="{color:colorMap[i.name]}">
					{{i.name}}
					<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
				</view>
				<view class="flex-warp u-flex-1 flex-around" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx" >
					{{i.basic_score}}
				</view>
			</view>
		</view>
		<view class="twobg ">
			<text class="u-shrink-no" >藏干：</text>
			<view class="flex-around u-flex-1">
				<view class="">
					<view v-for="i in bginfo.score_info.cang_gan[0]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5;  padding: 0 10rpx;">
							{{i.basic_score}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[1]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx">
							{{i.basic_score}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[2]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx">
							{{i.basic_score}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[3]" class="">
						<view class="">
							<view class="u-shrink-no">
								{{i.name}}
							</view>
							<!-- <text v-if="i.name!=''" style="font-size: 28rpx; color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx">
							{{i.basic_score}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 带计算的 -->
		<view class="twobg ">
			<!-- <text >天干：</text> -->
			<view class="flex-around u-flex-1 " >
				<view v-for="i in bginfo.score_info.tian_gan" class=" flex-warp  u-font-bold" >
					<view class="u-font-48 " :style="{color:colorMap[i.name]}">
						{{i.name}}
					</view>
					<view class="u-font-24 flex-warp" style="color: #4281c5; padding: 0 10rpx; word-wrap: break-word;word-break: break-all">
						{{i.num_step}}
					</view>
				</view>
			</view>
		</view>
		<view class="onebg ">
			<!-- <text>地支：</text> -->
			<view  v-for="i in bginfo.score_info.di_zhi" class="u-font-48 u-flex-1 u-font-bold" >
				<view class="" :style="{color:colorMap[i.name]}">
					{{i.name}}
					<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
				</view>
				<view class="flex-warp u-flex-1 flex-around" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx;word-wrap: break-word;word-break: break-all" >
					{{i.num_step}}
				</view>
			</view>
		</view>
		<view class="twobg ">
			<!-- <text class="u-shrink-no" >藏干：</text> -->
			<view class="flex-around u-flex-1">
				<view class="">
					<view v-for="i in bginfo.score_info.cang_gan[0]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5;  padding: 0 10rpx;word-wrap: break-word;word-break: break-all">
							{{i.num_step}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[1]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx;word-wrap: break-word;word-break: break-all">
							{{i.num_step}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[2]" class="">
						<view class="u-shrink-no">
							{{i.name}}
							<!-- <text style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx;word-wrap: break-word;word-break: break-all">
							{{i.num_step}}
						</view>
					</view>
				</view>
				<view class="" >
					<view v-for="i in bginfo.score_info.cang_gan[3]" class="">
						<view class="">
							<view class="u-shrink-no">
								{{i.name}}
							</view>
							<!-- <text v-if="i.name!=''" style="font-size: 28rpx;color: #4281c5" >{{i.basic_score}}</text> -->
						</view>
						<view class="flex-warp" v-if="i.name" style="font-size: 24rpx; color: #4281c5; padding: 0 10rpx;word-wrap: break-word;word-break: break-all">
							{{i.num_step}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="twobg ">
			<text>基础总分：</text>
			<text>{{bginfo.score_info.total_score}}</text>
		</view>
		<view class="twobg " >
			<view class="u-shrink-no">
				<text>库分：</text>
				<text>{{bginfo.score_info.ke_score}}</text>	
			</view>
			<view class="" style="flex-wrap: wrap; display: flex;">
				<text style="margin-left: 30rpx;" >辰:水库 </text>
				<text style="margin-left: 30rpx;" >戌:火库 </text>
				<text style="margin-left: 30rpx;" >丑:金库 </text>
				<text style="margin-left: 30rpx;" >未:木库 </text>
			</view>
		</view>
		<view class="twobgs " >
			<view class="">
				<text class="twobgitem" v-for="i in bginfo.score_info.ku_fen_list" >{{i}} </text>
			</view>
		</view>
		<view class="twobg ">
			<text>总分：</text>
			<text>{{(Number(bginfo.score_info.total_score) + Number(bginfo.score_info.ke_score)).toFixed(2)}}</text>
		</view>
		<view class="grid-container " style="flex-wrap: wrap;">
			<view  v-for="i in bginfo.score_info.list" >
				{{i.name}}{{i.num}}个
				<view class="">
					分数{{i.score}}
				</view>
				<view class="">
					{{i.ku_str}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// props:['bginfo'],
		props: {
			bginfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				colorMap: {
					甲: 'green',
					乙: 'green',
					丙: 'red', // 丙可以是任何颜色，这里假设为红色
					丁: 'red', // 丁可以是任何颜色，这里假设为黄色
					戊: 'brown', // 戊可以是任何颜色，这里假设为紫色
					己: 'brown',
					庚: 'yellow',
					辛: 'yellow',
					壬: 'blue',
					癸: 'blue',
					子: 'blue',
					丑: 'brown',
					寅: 'green',
					卯: 'green',
					辰: 'brown',
					巳: 'red',
					午: 'red',
					未: 'brown',
					申: 'yellow',
					酉: 'yellow',
					戌: 'brown',
					亥: 'blue',
				}
			}
		},
		methods: {
			getColor(character) {
				return {
					color: this.colorMap[character] || 'black' // 如果没有指定颜色，默认为黑色
				};
			},
		},
		mounted() {
			console.log(this.bginfo, 'zzz');
		},
	}
</script>

<style lang="scss" scoped>
	@for $i from 1 through 10 {
		.u-flex-#{$i} {
			flex: $i !important;
		}
	}

	.fourzhu {
		display: flex;
		background-color: #666666;
		padding: 20rpx 0rpx 20rpx 30rpx;
	}
	
	.onebg {
		display: flex;
		background-color: #ccc;
		padding: 20rpx 0rpx 20rpx 30rpx;
		text-align: center;
		align-items: center;
	}
	
	.twobg {
		display: flex;
		align-items: center;
		background-color: #999999;
		padding: 20rpx 0rpx 20rpx 30rpx;
		text-align: center;
		
	}
	.twobgs {
		display: flex;
		align-items: center;
		background-color: #999999;
		padding: 20rpx 0rpx 20rpx 30rpx;
		
	}
	.twobgitem{
		text-align: left;
		&:nth-child(n+2){
			margin-left: 30rpx;
		}
	}
	.grid-container {
	  padding: 20rpx 0rpx 20rpx 30rpx;
	  background-color: #999999;
	  display: grid;
	  grid-template-columns: repeat(4, 1fr); /* 一行四个，每列等宽 */
	  gap: 20rpx; /* 设置列与列之间的间隔 */
	}
</style>